<template>



    <el-card >
        <div slot="header"><span>个人中心</span></div>
        管理员ID：{{ userInfo.id }}
        <el-divider></el-divider>
        账号：{{ userInfo.account }}
        <el-divider></el-divider>
        用户组：{{ userInfo.userGroup }}
        <el-divider></el-divider>
        创建时间：{{ userInfo.ctime | formatYMD }}
        <el-divider></el-divider>
        <div>
            <el-upload class="avatar-uploader" 
                :action="`${API}/users/avatar_upload`"
                :show-file-list="false" 
                :on-success="handleAvatarSuccess" 
                :before-upload="beforeAvatarUpload">
                <img v-if="userInfo.imgUrl" :src="userInfo.imgUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </div>
    </el-card>





</template>

<script>
import { mapState ,mapActions} from 'vuex';
import { updateUserAvatarReq } from '@/api/user';
mapState
export default {
    data() {
        return {
            dialogImageUrl: '',
            dialogVisible: false,
            API: 'http://sell.h5.itsource.cn:8087',
        };
    },
    computed: {
        ...mapState('user', ['userInfo'])
    },
    methods: {
        ...mapActions('user',['A_getUserInfo']),
        //  //上传成功触发的函数
       async handleAvatarSuccess(res) {
        // console.log(res);
        let {code, msg, imgUrl} = res
        if(code===0){
            //发请求修改头像
            let res=await updateUserAvatarReq({
                imgUrl
            })
            let {code,msg}=res.data
            // console.log(res.data);
            if(code===0){
                // this.$store.dispatch('user/A_getUserInfo')
                this.A_getUserInfo()
            }
        }
     
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'||'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 和PNG格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    }
}
</script>

<style lang="scss" scoped>
.avatar-uploader :deep(.el-upload) {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 90px;
    height: 90px;
    line-height: 90px;
    text-align: center;
}

.avatar {
    width: 90px;
    height: 90px;
    display: block;
}
</style>